<template>
  <div>
    <h3>Persion 组件</h3>
    <h4>当前组件求和结果为: {{sum}}</h4>
    <h4>n*(n-1)的结果为: {{bigSum}}</h4>
    <h4>下方组件的总人数为：{{persions.length}}</h4>
    <div>
      <select name="" id="" v-model.number="inputNumber">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="increment(inputNumber)">+</button>
      <button @click="decrement(inputNumber)">-</button>
      <button @click="incrementOdd(inputNumber)">结果为奇数再加</button>
      <button @click="incrementAsync(inputNumber)">异步+</button>
    </div>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from "vuex";
export default {
  name:"Category",
  data() {
    return {
      inputNumber: 1
    }
  },
  methods: {
    ...mapMutations('countAbout',{increment:'INCREMENT',decrement:'DECREMENT'}),
    // ...mapMutations(['INCREMENT','DECREMENT']),

    // ...mapActions({incrementOdd:'incrementOdd',incrementAsync:'incrementAsync'}),
    ...mapActions('countAbout',['incrementOdd','incrementAsync']),

  },
  computed:{
    // ...mapState('countAbout',{sum:'sum',name:'name',persions:'persionList'}),
    ...mapState('countAbout',{sum:'sum',name:'name'}),
    ...mapState('persionAbout',{persions:'persionList'}),
    ...mapGetters('countAbout',{bigSum:'bigSum'}),
  }
}
</script>

<style>
  button {
    margin: 0 5px;
  }
</style>